<!DOCTYPE html>
<html lang="en" ng-app="FMApp">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>后台管理</title>	

		<!---bootstrap-->
		<link href="../styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<!---bootstrap end-->

		<!---my css-->
		<link href="../styles/style.css" rel="stylesheet" type="text/css" />
		<link href="../styles/music-player.css" rel="stylesheet" type="text/css" />
		<!---my css end-->

		<!---JS-->
		<script type="text/javascript" src="../vender/jquery.min.js"></script>

		<!---angularJS -->
		<script type="text/javascript" src="../vender/angularJS/angular.js"></script>
		<script type="text/javascript" src="../vender/angularJS/angular-route.js"></script>
		<script type="text/javascript" src="../vender/angularJS/angular-cookies.min.js"></script>
		<script type="text/javascript" src="../vender/angularJS/angular-resource.min.js"></script>
		<!---angularJS -->

		<!---my JS -->
		<script type="text/javascript" src="../scripts/controllers.js"></script>
		<script type="text/javascript" src="../scripts/services.js"></script>
		<!---my JS -->

		<script type="text/javascript" src="../vender/bootstrap.min.js"></script>
		<!---JS-->
	</head>
	<body>
		<div id="managerTitle">
			<h1>后台管理</h1>
		</div>
		
		<div id="manager" ng-controller="managerCtrl">
					<div class="col-sm-2">	
						<ul class="nav nav-pills nav-stacked nav-tabs">
							<li class="active"><a href="/#music" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;歌曲管理</a></li>
							<li><a href="/#channel" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;分类管理</a></li>
							<li><a href="/#user" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;用户管理</a></li>
						</ul>	
					</div>
					<div class="col-sm-10">
					    <div class="tab-content">
					    	<!-- 歌曲管理 -->
					        <div class="tab-pane fade in active" id="music">
					          	<ul id="musicTab" class="nav nav-tabs">
							        <li class="active"><a href="/#musicSearch" data-toggle="tab">搜索歌曲</a></li>
							        <li><a href="/#musicAll" data-toggle="tab">所有歌曲</a></li>
							    </ul>
							    <div id="musicTabContent" class="tab-content">
							        <div class="tab-pane fade in active" id="musicSearch">
							        	<div>
							        	</br>
								        	<form class="form-horizontal" role="form">
								        		<div class="form-group">
													<label for="musicKey" class="col-sm-2 control-label">Key</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="musicKey" placeholder="歌曲编号（key）">
												    </div>
												</div>
												<div class="form-group">
												    <label for="musicTitle" class="col-sm-2 control-label">Title</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="musicTitle" placeholder="歌曲名">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="musicArtist" class="col-sm-2 control-label">Artist</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="musicArtist" placeholder="艺术家">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="musicAlbum" class="col-sm-2 control-label">Album</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="musicAlbum" placeholder="专辑 ">
												    </div>
											    </div>
											     <div class="form-group">
												    <label for="musicStart" class="col-sm-2 control-label">Start</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="musicStart" placeholder="number">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="musicEnd" class="col-sm-2 control-label">End</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="musicEnd" placeholder="number ">
												    </div>
											    </div>
											</form>
										</div>
							          	<button>search</button>
							          	<div id="paginator"></div>
							        </div>
							        <div class="tab-pane fade" id="musicAll">
							        	</br>
							          	<div>
							          		<table class="table table-hover">
										        <thead>
										          <tr>
										          	<th>#</th>
										            <th>歌名</th>
										            <th>歌手</th>
										            <th>专辑</th>
										            <th>歌曲编号（key）</th>
										            <th>详细信息</th>
										          </tr>
										        </thead>
										        <tbody>
										          <tr ng-repeat="music in musics">
										          	<td>{{ $index + 1}}</td>
										            <td>{{ music.title }}</td>
										            <td>{{ music.artist }}</td>
										            <td>{{ music.album }}</td>
										            <td>{{ music.key }}</td>
										            <td><a href="#">点击</a></td>
										          </tr>
										        </tbody>
										      </table>
							          	</div>
							        </div>
							    </div>  	
					        </div>
					        <!-- 歌曲管理 -->
					        <!-- 分类管理 -->
					        <div class="tab-pane fade" id="channel">
					        	<ul id="musicTab" class="nav nav-tabs">
							        <li class="active"><a href="/#channelSearch" data-toggle="tab">搜索分类</a></li>
							        <li><a href="/#channelAll" data-toggle="tab">所有分类</a></li>
							    </ul>
							    <div id="musicTabContent" class="tab-content">
							        <div class="tab-pane fade in active" id="channelSearch">
							        	<div>
							        	</br>
								        	<form class="form-horizontal" role="form">
								        		<div class="form-group">
													<label for="channelkey" class="col-sm-2 control-label">Key</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="channelkey" placeholder="分类编号（key）">
												    </div>
												</div>
												<div class="form-group">
												    <label for="channelName" class="col-sm-2 control-label">Name</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="channelName" placeholder="分类名">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="channelStart" class="col-sm-2 control-label">Start</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="channelStart" placeholder="number">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="channelEnd" class="col-sm-2 control-label">End</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="channelEnd" placeholder="number ">
												    </div>
											    </div>
											</form>
										</div>
							          	<button>search</button>
							        </div>
							        <div class="tab-pane fade" id="channelAll">
							        	</br>
							          	<div>
							          		<table class="table table-hover">
										        <thead>
										          <tr>
										          	<th>#</th>
										            <th>分类</th>
										            <th>歌曲数量</th>
										            <th>播放状态</th>
										            <th>分类编号（key）</th>
										            <th>详细信息</th>
										          </tr>
										        </thead>
										        <tbody>
										          <tr ng-repeat="channel in channels">
										          	<td>{{ $index + 1 }}</td>
										            <td>{{ channel.name }}</td>
										            <td>{{ channel.music_list }}</td>
										            <td>{{ channel.playable }}</td>
										            <td>{{ channel.key }}</td>
										            <td><a href="#">点击</a></td>
										          </tr>
										        </tbody>
										    </table>
							          	</div>
							        </div>
							        <div>number all: {{channelNumAll}}</div>
							        <div id="test"></div>
							        <div id="channelPaginator" align='middle'></div>			   
							    </div>  	
					        </div>
					        <!-- 分类管理 -->
					        <!-- 用户管理 -->
					        <div class="tab-pane fade" id="user">
					        	<ul id="musicTab" class="nav nav-tabs">
							        <li class="active"><a href="/#userSearch" data-toggle="tab">搜索用户</a></li>
							        <li><a href="/#userAll" data-toggle="tab">所有用户</a></li>
							    </ul>
							    <div id="musicTabContent" class="tab-content">
							        <div class="tab-pane fade in active" id="userSearch">
							        	<div>
							        	</br>
								        	<form class="form-horizontal" role="form">
								        		<div class="form-group">
													<label for="userKey" class="col-sm-2 control-label">Key</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="userKey" placeholder="用户编号（key）">
												    </div>
												</div>
												<div class="form-group">
												    <label for="userName" class="col-sm-2 control-label">用户名</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="userName" placeholder="用户名">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="userLevel" class="col-sm-2 control-label">权限</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="userLevel" placeholder="权限">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="userStart" class="col-sm-2 control-label">Start</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="userStart" placeholder="number">
												    </div>
											    </div>
											    <div class="form-group">
												    <label for="userEnd" class="col-sm-2 control-label">End</label>
												    <div class="col-sm-4">
												      	<input type="text" class="form-control" id="userEnd" placeholder="number ">
												    </div>
											    </div>
											</form>
										</div>
							          	<button>search</button>
							        </div>
							        <div class="tab-pane fade" id="userAll">
							        	</br>
							          	<div>
							          		<table class="table table-hover">
										        <thead>
										          <tr>
										          	<th>#</th>
										            <th>用户名</th>
										            <th>权限</th>
										            <th>用户编号（key）</th>
										            <th>注册时间</th>
										            <th>详细信息</th>
										          </tr>
										        </thead>
										        <tbody>
										          <tr ng-repeat="user in users">
										          	<td>{{ $index + 1 }}</td>
										            <td>{{ user.name }}</td>
										            <td>{{ user.level }}</td>
										            <td>{{ user.key }}</td>
										            <td>{{ user.regist_date }}</td>
										            <td><a href="#">点击</a></td>
										          </tr>
										        </tbody>
										      </table>
							          	</div>
							        </div>
							    </div>  	
					          	<p>用户管理</p>
					          	<div>{{users}}</div>
					        </div>
					        <!-- 用户管理 -->
					    </div>
					</div>
				</div>
	</body>
</html>